<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" type="text/css" crossorigin="anonymous" href="./css/bootstrap.css"/>
  <link rel="stylesheet" href="./css/element.css">
  <script type="text/javascript" src="./js/marked.min.js"></script>
  <script type="text/javascript" src="./js/axios.min.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;	
		}
		.navigation {
			position: sticky;
			top: 0px;
			height: 50px;
			/* width: 100%; */
			background-image: linear-gradient(to right,rgba(255,255,255,0),wheat);
			/* 圆边 */
			border-radius: 0px 0px 10px 10px;
			/* 阴影 */
			/* box-shadow: h-shadow v-shadow blur spread color inset */
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
			/* 背景高斯模糊 */
			backdrop-filter: blur(10px);
		}
		.banner {
			height: 300px;
			background-image: linear-gradient(white,skyblue,deepskyblue);
			border-radius: 10px 10px 10px 10px;
			/* 阴影 */
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
		}
		.header {
			margin: 10px auto;
			width: 80%;
			border: 1px solid gray;
			border-radius: 5px 5px 5px 5px;
		}
		.content {
			margin: 10px auto;
			width: 80%;
			border: 1px solid gray;
			border-radius: 5px 5px 5px 5px;
		}
		.box {
			margin: 0 auto;
			height: 100px;
			width: 100px;
			background-color: rgba(0,0,0,0.5);
			border-radius: 5px 5px 5px 5px;
			transition: all 0.7s;
		}
		/* 鼠标经过阴影 */
		.box:hover {
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
			transform: scale(1.2);
		}
		@keyframes ani {
			0% {
				transform: translateX(0px);
			}
			100% {
				transform: translateX(100px);
			}
		}
		.ani {
			width: 200px;
			height: 200px;
			background-color: pink;
			animation-name: ani;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		.footer {
			padding: 30px;
			height: 80px;
			background-image: linear-gradient(#FFFFFF,#FFFAFA,#FFFAF0,#FFF8DC);
			text-align: center;
			font-weight: bold;
		}
		.footer a {
			font-size: large;
			text-decoration: none;
			color: gray;
		}
		.footer a:hover {
			color: gold;
		}
	</style>
</head>
<body>
  <nav class="navigation">
	  <div class="github">
		  github
	  </div>
  </nav>
  <div class="banner">
	  banner
  </div>
  <header class="header">
	  header
  </header>
  <article class="content">
	  <div>
	  		<a></a>
	  </div>
	  <div>
	  		<li></li>
	  		<li></li>
	  		<li></li>
	  		<li></li>
	  </div>
	  <div class="box">
	  </div>
	  <section>
		  aaa
	  </section>
	  <div class="ani">
		  animation
	  </div>
	  <div id="markdown"></div>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
	  <p>some content</p>
  </article>
  <aside>
	  aside
  </aside>
  <aside>
	  aside
  </aside>
  <footer class="footer">
	  <a href="https://beian.miit.gov.cn" target="_blank">© 2021 Onij | 豫ICP备2021033195号</a>
  </footer>
</body>
  <!-- import Vue before Element -->
  <script src="./js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="./js/element.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
  <script>
    document.getElementById('markdown').innerHTML =
      marked.parse('# Marked in the browser\n\nRendered by **marked**. \n\n```print("hello")```');
	var header = document.getElementsByClassName('header')[0]
	header.innerHTML = marked.parse('# Marked in the browser\n\nRendered by **marked**.'+
	 '\n\n```print("hello")```'+
	 '# Marked in the browser\n\nRendered by **marked**.'+
	'\n\n```print("hello")```');
  </script>
  <script>
  (function(window,document,undefined){
          var hearts = [];
          window.requestAnimationFrame = (function(){
                  return window.requestAnimationFrame || 
                             window.webkitRequestAnimationFrame ||
                             window.mozRequestAnimationFrame ||
                             window.oRequestAnimationFrame ||
                             window.msRequestAnimationFrame ||
                             function (callback){
                                     setTimeout(callback,1000/60);
                             }
          })();
          init();
          function init(){
                  css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                  attachEvent();
                  gameloop();
          }
          function gameloop(){
                  for(var i=0;i<hearts.length;i++){
                      if(hearts[i].alpha <=0){
                              document.body.removeChild(hearts[i].el);
                              hearts.splice(i,1);
                              continue;
                      }
                      hearts[i].y--;
                      hearts[i].scale += 0.004;
                      hearts[i].alpha -= 0.013;
                      hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
              }
              requestAnimationFrame(gameloop);
          }
          function attachEvent(){
                  var old = typeof window.onclick==="function" && window.onclick;
                  window.onclick = function(event){
                          old && old();
                          createHeart(event);
                  }
          }
          function createHeart(event){
              var d = document.createElement("div");
              d.className = "heart";
              hearts.push({
                      el : d,
                      x : event.clientX - 5,
                      y : event.clientY - 5,
                      scale : 1,
                      alpha : 1,
                      color : randomColor()
              });
              document.body.appendChild(d);
      }
      function css(css){
              var style = document.createElement("style");
                  style.type="text/css";
                  try{
                      style.appendChild(document.createTextNode(css));
                  }catch(ex){
                      style.styleSheet.cssText = css;
                  }
                  document.getElementsByTagName('head')[0].appendChild(style);
      }
          function randomColor(){
                  return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
          }
  })(window,document);
  </script>
</html>